<template>
  <div class="xtx-city">
    <div class="select" @click="toggleDialog" :class="{ isShow: isShow }">
      <span class="value" v-if="selectResult.address">{{
        selectResult.address
      }}</span>
      <span class="placeholder" v-else>请选择配送地址</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="isShow">
      <span
        class="ellipsis"
        v-for="item in dataList"
        :key="item.code"
        @click="handleSelect(item)"
        >{{ item.name }}</span
      >
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import axios from "axios";
export default {
  name: "XtxCity",
  props: {
    modelValue: {
      type: String,
      // default: ''
      // 这两种写法都行
      default: () => {
        return "";
      },
    },
  },
  setup(props, { emit }) {
    // 发请求获取城市列表:获取行政区划
    getAreaList();
    const dataList = ref([]);
    // 备份省市区的列表、为关闭做数据重置
    const cacheData = ref(null);
    // 3. 交互选择:收集用户选择的省市区信息
    const selectResult = reactive({
      provinceCode: "", // 省code
      provinceName: "", // 省名称
      cityCode: "", // 城市code
      cityName: "", // 城市名称
      countyCode: "", // 地区code
      countyName: "", // 地区名
      resultAddress: "", // 最终结果地址
    });
    async function getAreaList() {
      const resp = await axios({
        method: "get",
        url: "https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json",
      });
      // 赋值
      // 一份赋值给ref对象-->给模板使用
      dataList.value = resp.data;
      // 备份数据：赋值给cacheData,为关闭做数据重置
      // 这里 cacheData 不受影响，
      // 如果另外一对象受影响，需要借助深拷贝
      cacheData.value = resp.data;
      // console.log(dataList.value)
    }
    //
    function handleSelect(item) {
      // 拿到 item 的 areaList 数组，赋值给dataList
      // item 的level属性
      // 0：省
      // 1：市
      // 2：区
      dataList.value = item.areaList;
      // 如果选择的是区
      if (item.level === 0) {
        // 省
        selectResult.proviceCode = item.code;
        selectResult.proviceName = item.name;
      } else if (item.level === 1) {
        // 市
        selectResult.cityCode = item.code;
        selectResult.cityName = item.name;
      } else {
        // 区
        // 隐藏盒子
        isShow.value = false;
        // 把备份的数据赋值给dataList
        dataList.value = cacheData.value;
        selectResult.countyCode = item.code;
        selectResult.countyName = item.name;
        // 在选择了区之后，生成完整地址
        selectResult.address = `${selectResult.proviceName}-${selectResult.cityName}-${selectResult.countyName}`;
        emit("update:modelValue", selectResult.address);
        emit("change", selectResult);
      }
    }
    // 控制展开收起,默认收起
    const isShow = ref(false);
    // 打开弹框
    function open() {
      isShow.value = true;
    }
    // 关闭弹框
    function close() {
      isShow.value = false;
    }
    // 切换展开收起
    function toggleDialog() {
      if (isShow.value) {
        close();
      } else {
        open();
      }
    }

    return {
      isShow,
      toggleDialog,
      getAreaList,
      handleSelect,
      dataList,
      cacheData,
      selectResult,
    };
  },
};
</script>
<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  margin-left: 10px;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.isShow {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
